<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <!-- ng-app指令 初始化应用程序 -->
    <!-- ng-init指令 初始化指定数据 -->
    <div data-ng-app="myApp" data-ng-init="names=['Jani','Hege','Kai'];">
        <p>使用 ng-model 绑定数据</p>
        <p>
            <span>姓：<input type="text" data-ng-model="last" /><br /></span>
            <span>名：<input type="text" data-ng-model="first" /><br /></span>
            <span>姓名：{{ first + " " + last }}</span>
        </p>
        <p>使用 ng-repeat 来循环数组</p>
        <ul>
            <li ng-repeat="x in names">
                {{ x }}
            </li>
        </ul>

        <p>自定义指令</p>
        <p>
            <span>default</span><br />
            <span>Element:<yyh1></yyh1></span><br />
            <span>Attribute:<span yyh1></span></span><br />
            <span>Class:<span class='yyh1'></span></span><br />
            <span>Comment:<!-- directive: yyh1 --></span>
        </p>


        <p>
            <span>restrict: 'E'</span><br />
            <span>Element:<yyh2-app></yyh2-app></span><br />
            <span>Attribute:<span yyh2-app></span></span><br />
            <span>Class:<span class='yyh2-app'></span></span><br />
            <span>Comment:<!-- directive: yyh2-app --></span>
        </p>
        <p>
            <span>restrict: 'A'</span><br />
            <span>Element:<yyh3-app></yyh3-app></span><br />
            <span>Attribute:<span yyh3-app></span></span><br />
            <span>Class:<span class='yyh3-app'></span></span><br />
            <span>Comment:<!-- directive: yyh3-app --></span>
        </p>
        <p>
            <span>restrict: 'C'</span><br />
            <span>Element:<yyh4-app></yyh4-app></span><br />
            <span>Attribute:<span yyh4-app></span></span><br />
            <span>Class:<span class='yyh4-app'></span></span><br />
            <span>Comment:<!-- directive: yyh4-app --></span>
        </p>
        <p>
            <span>restrict: 'M'</span><br />
            <span>Element:<yyh5-app></yyh5-app></span><br />
            <span>Attribute:<span yyh5-app></span></span><br />
            <span>Class:<span class='yyh5-app'></span></span><br />
            <span>Comment:<!-- directive: yyh5-app --></span>
        </p>

        <p>
            <span>restrict: 'M', replace:true</span><br />
            <span>Element:<yyh6-app></yyh6-app></span><br />
            <span>Attribute:<span yyh6-app></span></span><br />
            <span>Class:<span class='yyh6-app'></span></span><br />
            <span>Comment:<!-- directive: yyh6-app --></span>
        </p>

        <p>
            
            <span>restrict: 'AEC'</span><br />
            <span>Element:<yyh7-app></yyh7-app></span><br />
            <span>Attribute:<span yyh7-app></span></span><br />
            <span>Class:<span class='yyh7-app'></span></span><br />
            <span>Comment:<!-- directive: yyh7-app --></span>
        </p>
    </div>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script type="application/javascript">
        var app = angular.module('myApp', []);
        app.directive('yyh1', function() {
            return {
                template: "<span>自定义指令1</span>"
            }
        });
        app.directive('yyh2App', function() {
            return {
                restrict: 'E',
                template: "<span>自定义指令2</span>"
            }
        });
        app.directive('yyh3App', function() {
            return {
                restrict: 'A',
                template: "<span>自定义指令3</span>"
            }
        });
        app.directive('yyh4App', function() {
            return {
                restrict: 'C',
                template: "<span>自定义指令4</span>"
            }
        });
        app.directive('yyh5App', function() {
            return {
                restrict: 'M',
                template: "<span>自定义指令5</span>"
            }
        });
        app.directive('yyh6App', function() {
            return {
                restrict: 'M',
                replace: true,
                template: "<span>自定义指令6</span>"
            }
        });
        app.directive('yyh7App', function() {
            return {
                restrict: 'AEC',
                template: "<span>自定义指令7</span>"
            }
        });

    </script>
</body>

</html>
